import React, { FC, useState } from 'react'
import { Space, Button, Tooltip } from 'antd'
import {
  DeleteOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  CopyOutlined,
  BlockOutlined
} from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import {
  removeSelectComponent,
  changeComponentHidden,
  changeComponentLocked,
  copySelectComponent,
  pasteCopiedComponent
} from '../../../store/componentsReducer'
import useGetComponentsInfo from '../../../hooks/useGetComponentInfo'

const EditToolBar: FC = () => {
  const dispatch = useDispatch()
  const { selectedId, selectComponent, copiedComponent } = useGetComponentsInfo()
  const { isLocked } = selectComponent || {}

  function handleDelete() {
    dispatch(removeSelectComponent())
  }
  function handleHidden() {
    dispatch(changeComponentHidden({ fe_id: selectedId, isHidden: true }))
  }
  function handleLocked() {
    dispatch(changeComponentLocked({ fe_id: selectedId }))
  }

  function handleCopy() {
    dispatch(copySelectComponent())
  }
  function handlePaste() {
    //
    dispatch(pasteCopiedComponent())
  }
  return (
    <Space>
      <Tooltip title="删除">
        <Button shape="circle" onClick={handleDelete} icon={<DeleteOutlined />}></Button>
      </Tooltip>
      <Tooltip title="隐藏">
        <Button shape="circle" onClick={handleHidden} icon={<EyeInvisibleOutlined />}></Button>
      </Tooltip>
      <Tooltip title="锁定">
        <Button
          shape="circle"
          onClick={handleLocked}
          icon={<LockOutlined />}
          type={isLocked ? 'primary' : 'default'}
        ></Button>
      </Tooltip>
      <Tooltip title="复制">
        <Button shape="circle" onClick={handleCopy} icon={<CopyOutlined />}></Button>
      </Tooltip>
      <Tooltip title="粘贴">
        <Button
          shape="circle"
          disabled={copiedComponent === null}
          onClick={handlePaste}
          icon={<BlockOutlined />}
        ></Button>
      </Tooltip>
    </Space>
  )
}

export default EditToolBar
